<template>
    <div class="main_left_bar1">
        <div id="echarts" style="width:100%;height:2.97rem;z-index:100"></div>
        <div class="yuan"></div>
        <dv-border-box-1 style="width:3.3rem;height:1.3rem;" id="echartsPieq">
            <div class="flex">
                <div class="message">
                    <p>{{barName}}</p>
                    <p>
                        <span>人数:</span>
                        <span style="font-size:0.27rem;color:#A1E552;padding-left:0.1rem;">{{people}}</span>
                    </p>
                    <p>占比:{{persent}}</p>
                </div>

                <div id="echartsPie" style="width:2rem;height:1.2rem;z-index:1;"></div>

            </div>

        </dv-border-box-1>

    </div>
</template>

<script>
import echartMixins from "@/utils/resizeMixins";
import {PowerGrid} from '@/api/index.js'
const echarts = require("echarts");
export default {
  data() {
    return {
      echartsNull: null,
      echartsPieNull: null,
      barName: "网格信息员",
      people: "851",
      persent: "12.44%",
      data: [],
      dataNum: [],
      date:[],
      sum: 0
    };
  },
  created(){
//  this.datas()
  },
  mounted() {
    this.echartsNull = echarts.init(document.getElementById("echarts"));
    this.echartsPieNull = echarts.init(document.getElementById("echartsPie"));
 this.datas()
  },
  methods: {
    async datas(){
      let datas=[]
      let name=[]
        try {
        const { data } = await PowerGrid()
        console.log(data)
        var date=data.date.gridPower.gridPower
         date.forEach(item=>{
            name.push(item.name)
            datas.push(parseInt(item.value))
         })
         
         this.darw(datas,name)
         console.log(this.data,this.dataNum);
      } catch (error) {
        console.log(error)
      }
    },
    darw(datas,name) {
      let self = this;
      let sum = 0;
      let arr = this.dataNum;
      arr.forEach(item => {
        sum = sum + item;
      });
      this.sum = sum;

      // 基于准备好的dom，初始化echarts实例
      this.$nextTick(() => {
        var option = {
          color: ["#1C86F1"],

          backgroundColor: "#082560",
          xAxis: {
            type: "category",
            data:name ,
            axisLine: {
              lineStyle: {
                color: "#657CA8"
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: "#FFF",
              rotate: 45
            }
          },
          grid: {
            top: "10%",
            right: "5%",
            left: "5%"
          },
          yAxis: {
            type: "value",
            show: false
          },
          series: [
            {
              type: "bar",
              barWidth: 20,
              data: datas,
              emphasis: {
                itemStyle: {
                  // 高亮时点的颜色。
                  color: "#A1E551"
                }
              },
              label: {
                show: false
              },
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "#54CBF5" }, //柱图渐变色
                    { offset: 0.5, color: "#36A0EE" }, //柱图渐变色
                    { offset: 1, color: "#2B79E5" } //柱图渐变色
                  ])
                }
              }
            }
          ]
        };
        self.darw1(self.persent);
        self.echartsNull.on("click", function(params) {
          console.log(params);
          self.barName = params.name;
          self.people = params.value;
          self.persent = (params.value / self.sum).toFixed(2) + "%";
          self.darw1(self.persent);
        });
        self.echartsNull.setOption(option);
        window.addEventListener("resize", () => {
          self.echartsNull.resize();
        });
      });
    },
    darw1(persent) {
      let self = this;
      // 基于准备好的dom，初始化echarts实例
      this.$nextTick(() => {
        self.echartsPieNull.setOption({
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          grid: { top: "12%", bottom: "1%" },
          graphic: {
            //图形中间文字
            type: "text",
            right: "29%",
            top: "45%",
            style: {
              text: persent,
              textAlign: "center",
              fill: "#FFF",
              fontSize: 13
            }
          },

          series: [
            {
              type: "pie",
              center: ["45%", "55%"],
              radius: ["65%", "70%"],
              label: {
                normal: {
                  position: "inner",
                  show: false
                }
              },
              name: "饼图",
              data: [
                {
                  value: self.sum,
                  itemStyle: {
                    normal: {
                      color: "#A1E552"
                    }
                  }
                },
                {
                  value: self.people,
                  itemStyle: {
                    normal: {
                      color: "#14C9C2"
                    }
                  }
                }
              ]
            }
          ]
        });
        //      let index = 0; // 高亮索引
        //   self.echartsPieNull.dispatchAction({
        //     type: "highlight",
        //     seriesIndex: index,
        //     dataIndex: index
        //   });
        window.addEventListener("resize", () => {
          self.echartsPieNull.resize();
        });
      });
    }
  },
  mixins: [echartMixins]
};
</script>

<style lang="scss">
.main_left_bar1 {
  width: 100%;

  position: relative;
  .yuan {
    width: 1rem;
    height: 1rem;
    z-index: 1;
      border-radius: 2.5rem;
    border: 1px solid #11BEBA;
    position: absolute;
    right: 27.5%;
    top: 9%;
  }
  .message {
    width: 3.3rem;
    margin-top: 0.2rem;
    margin-left: 0.1rem;
    p {
      padding-top: 0.1rem;
      color: #FFF;
    }
  }
}

#echartsPieq {
  position: absolute;
  top: 4%;
  right: 25%;
  // background: #03123d;
}
</style>
